<template>
  <div class="rights">
    <el-row>
      <el-col :span=24>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>

    <el-table :data="rightList" v-loading="loading" style="width:100%" class="margin-20">
      <el-table-column type="index">
      </el-table-column>
      <el-table-column prop="authName" label="权限名称" width="180">
      </el-table-column>
      <el-table-column prop="path" label="路径" width="180">
      </el-table-column>
      <el-table-column label="层级">
        <template slot-scope="scope">
          <span>{{scope.row.level | fmtLevel}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getRightList } from '@/api/api.js'
export default {
  data () {
    return {
      loading: false,
      rightList: []
    }
  },
  filters: {
    fmtLevel (level) {
      switch (level) {
        case '0' : return '一级'
        case '1' : return '二级'
        default : return '三级'
      }
    }
  },
  created () {
    this.loading = true
    getRightList({type: 'list'}).then(res => {
      if (res.meta.status === 200) {
        this.rightList = res.data
        this.loading = false
      }
    })
  }
}
</script>
